<template>
	<view class="orderListItem" @click.stop="toDetail()">
		<view class="oli_top">
			<view class="dead_time">
				{{"订单编号："+item.order_sn}}
			</view>
			<view class="oli_status">
				{{getType(item.order_status)}}
			</view>
		</view>
		<view class="oli_center">
			<view v-for="(items,indexs) in item.detail" :key="indexs" style="margin-bottom: 20rpx;">
				<product-item :item="items" :type="type"></product-item>
			</view>
		</view>
		<view class="pay_price">
			{{"实付："+item.pay_amount+'积分'+getprice()}}
		</view>
		<view class="btn_warp">
			<view class="cancel_btn_gary" v-if="getBtnShow(item.order_status,[1,3])&&item.order_type!=4"
				@click.stop="toCancel()">
				取消订单
			</view>
			<view class="cancel_btn_gary"
				v-if="getBtnShow(item.order_status,[1]) && item.order_type!=1&&item.order_type!=4">
				修改地址
			</view>
			<view class="cancel_btn" v-if="item.order_type==4" @click.stop="toCancel()">
				取消预约
			</view>
			<view class="cancel_btn"
				v-if="getBtnShow(item.order_status,[2,3]) && item.order_type!=1&& item.order_type!=4">
				修改地址
			</view>
			<view class="cancel_btn" v-if="getBtnShow(item.order_status,[1])&&item.order_type!=4" @click.stop="toPay()">
				继续付款
			</view>
			<view class="cancel_btn" v-if="getBtnShow(item.order_status,[5])&&item.order_type!=4"
				@click.stop="toEvaluate()">
				评价
			</view>
			<view class="cancel_btn" v-if="getBtnShow(item.order_status,[4])&&item.order_type!=4 && item.order_type!=2"
				@click.stop="toSign()">
				确认收货
			</view>
		</view>
	</view>
</template>

<script>
	import productItem from "@/components/product_item_int.vue"
	export default {
		name: "orderList_item_int",
		components: {
			productItem
		},
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			type: {
				type: String,
				default: "load"
			},
		},
		data() {
			return {
				typeList: [{
						id: "0",
						name: "已取消"
					},
					{
						id: "1",
						name: "待付款"
					},
					{
						id: "2",
						name: "待发货"
					},
					{
						id: "3",
						name: "待核销"
					},
					{
						id: "4",
						name: "待收货"
					},
					{
						id: "5",
						name: "待评论"
					},
					{
						id: "6",
						name: "已完成"
					},
					{
						id: "7",
						name: "申请退款"
					},
					{
						id: "8",
						name: "填写信息"
					},
					{
						id: "9",
						name: "退款中"
					},
					{
						id: "10",
						name: "退款成功"
					},
					{
						id: "11",
						name: "已预约"
					}
				]
			};
		},
		methods: {
			getprice() {
				let data = ""
				if (Object.keys(this.item).length > 0) {
					if (this.item.freight && this.item.coupon_freight_amount) {
						if (Number(this.item.freight) > Number(this.item.coupon_freight_amount)) {
							data = '+￥' + Number(Number(this.item.freight) - Number(this.item.coupon_freight_amount))
						} else {
							data = '+￥0.00'
						}
					}
				}
				return data
			},
			toRefundDetail() {
				this.$emit("toRefundDetail", this.item)
			},
			toRefund() {
				this.$emit("toRefund", this.item)
			},
			toEvaluate() {
				this.$emit("toEvaluate", this.item)
			},
			toSign() {
				this.$emit("toSign", this.item)
			},
			toCancel() {
				this.$emit("toCancel", this.item)
			},
			toDetail() {
				this.$emit("toDetail", this.item)
			},
			toPay() {
				this.$emit("toPay", this.item)
			},
			getBtnShow(num, arr) {
				let isShow = false
				if (num >= 0) {
					if (arr.indexOf(num) >= 0) {
						isShow = true
					} else {
						isShow = false
					}
				}
				return isShow
			},
			getType(num) {
				let data = ""
				if (num >= 0) {
					data = this.typeList.filter(item => {
						return item.id == num
					})[0].name
					if (this.item.order_type == 4 && num == 1) {
						data = "已预约"
					}
					if (this.item.order_type == 1 && num == 2) {
						data = "已核销"
					}
				}
				return data
			}
		}
	}
</script>

<style scoped lang="scss">
	.cancel_btn_gary {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #E9E9EA;
		font-size: 28rpx;
		color: #A2A2A2;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.cancel_btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #9E190F;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.btn_warp {
		width: 100%;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: flex-end;
		margin-top: 30rpx;
	}

	.pay_price {
		color: #666666;
		font-size: 28rpx;
		width: 100%;
		text-align: right;
	}

	.dead_time {
		font-size: 26rpx;
		color: #666666;
	}

	.oli_status {
		font-size: 26rpx;
		color: #D31E11;
	}

	.dcc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dcb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.oli_top {
		width: 100%;
		@extend.dcb;
		margin-bottom: 20rpx;
	}

	.orderListItem {
		width: 690rpx;
		border-radius: 20rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>